インターフェース工学情報可視化の続き

10月18日　情報可視化の続き

・なぜBAD UIができるのか？

再来週に話す

フォーカスプラスコンテキスト？

情報視覚化手法

これの使い方によって、印象操作ができる。

メディアで出てくるグラフや図など

・プロジェクションマッピング

実際は何回もリハーサルされている。

東京駅のやつではその練習で写した時に人が集まりすぎて交通混乱が起きた

・情報の出所、エビデンスをしっかり確認してほしい

・いずれプログラミングも直感的にできるようになるか？

ビジュアル型プログラミングなんかがそう

・あえて入力がしにくくすることが必要なインタフェースもある。

deleteボタンが押しやすすぎたらヤバい

・読唇術を使った入力インタフェースは？

見たことはない

あるとは思う

ドイツの学会で、人が呼吸して吸う動作で入力するインタフェースがあった

・ニコ動

画面に文字が流れる

先生は流行らないと思っていた。

米学会：

授業で写真を撮るのは記憶の定着に効果がない

今回は先週の続き(休んだ日)

情報可視化

この分野の研究はオワコンになった

今は事例研究のみ

でも世の中の8割は視覚に頼っている

今ホットなのは触覚

情報可視化モデル　card:1999

Step 1 : Data Transformation

膨大なデータから必要なものを絞り込む

数

属性

条件に合致するもの

“京都”の”ラーメン”屋さん

直接操作3つ

・動的問い合わせ(Dynamic Query)

レスポンシブに操作できるWebサイトなど

・Details on demand

全体の図だけを始めに見せて、

必要に応じて、クリックなどして詳細を見る

・Brushing and linking

複数の次元を扱う時に便利

Brushing: ドラッグなどしてみるところを選ぶこと

Linking: もう一つの図に反映させる

Step 2: Visual mapping

視覚化する空間の定義

映画をデータとして扱う場合：

上映したとし：X

尺の長さ：Y

など

用途によってどうマッピングするか変わる

Step 3: Visual Transformation

ユーザの視点や注目度を明確にするための視覚効果を付与。

フォーカスプラスコンテキスト

代表的な２つの技法

・Overview+Detail

複数のウィンドウを使って並べて表示したり

詳細度は均一

いくらでも階層化できる？　梅田

・Focus+Context

基本的に一画面で、必要なところだけを詳しく

例：Hyperbolic tree形式

Hyperbolic browser : inxight社

それぞれ逆の利点、欠点がある

・Overview+Detail

＋データたくさん扱える

＋複数の注目度

＋実装が簡単

+いくらでも階層化できる

-複数の画面が必要

-全体と詳細の関係が把握しにくい

-見るの大変

・Focus+Context

＋場所を有効利用している

+全体と部分をスムーズに移動できる

＋人間のモデルに近い？

ー歪む(距離情報が失われる)

ー慣れにくい

ーフラットに全体が見れない

ーマウスの移動と拡大領域が直感的でない

Shneiderman の真言(マントラ)

Overview first zoom and filter then details on demand

まず、全体を眺め、拡大したり間引いたりしてから、見たいところを詳しく眺めろ

様々な可視化手法

ネットワーク構造の可視化

ノードとリンク

↑

バネ埋め込み(Spring Embedding)

自分とつながるノードから距離に応じた力を受けるという考え方

Internetのネットワーク構造の可視化

Opte project

これを3Dでもされている

Twitter分析：Flamingの起こり方など

ツリー方式

2D vs 3D表示

GIS(地理情報)を用いた可視化

店舗情報の可視化など

ヒートマップ

混雑状況の温度差のメタファーを使った可視化

階層構造の可視化

・Cone Tree 初めての3D改造構造表示

・ツリーマップも

日経平均株価など

テキストの可視化(最近の流行り)

Seesoft

聖書の中で、特定の単語がどこに現れるのか。。。

といった表示

Docuburst

ある単語について、その概念はどんな概念がどのくらい占めているのか。。。

Word Tree

単語の後に何が来やすいか